Tengo un componente secundario cuya función es cargar una foto. Foto cargada asignada a los datos del componente secundario denominado "foto". Necesito vincular datos principales llamados "archivo" con datos secundarios llamados "foto". Y cuando se cambia la "foto", el "archivo" también debe cambiarse.
Componente hijo:
<template> <div class="select"> <img v-if="previewFile" :src="previewFile" alt="" /> <img v-else src="/images/empty.jpg" alt="" /> <label class="btn" for="image-upload">{{ btnLabel }}</label> <input id="image-upload" type="file" ref="file" @change="uploadFile" /> </div> </template> import { mapGetters } from "vuex"; export default { name: "SelectPhoto", data() { return { file: null, previewFile: null, }; }, methods: { uploadFile() { this.file = this.$refs.file.files[0]; } } }Componente principal:
<template> <SelectPhoto :btn-label="text.RU.photoSelect.choosePhoto" v-model:file.sync="file"/> <BaseButton :label="text.RU.photoSelect.knowName" @do="$emit('getResult', file, previewFile)" /> </template> <script> export default { data() { return { file: null, }; }, }; </script>Ya usó $emit en su componente BaseButton . También podría usarlo para this.file . En su componente hijo como este:
uploadFile() { this.file = this.$refs.file.files[0]; this.$emit('sendMyFile', this.file) }En su componente principal, para reaccionar a la acción:
<SelectPhoto @sendMyFile="getMyFile" :btn-label="text.RU.photoSelect.choosePhoto" v-model:file.sync="file"/> También en el componente principal, haga lo que quiera con the.file :
methods: { getMyFile(file) { // do something } }